<template>
    <div class="bnh-home-container">
        <div class="bnh-home-headBox">
            <div class="bnh-head-img">
                <img src="@/assets/img/head.png" alt="">
            </div>
            <p class="bnh-head-name">奋斗的青春</p>
            <p class="bnh-home-tel">187****1398</p>
            <div class="bnh-authBox" @click="onAuth">
                <p>未认证</p>
            </div>
        </div>
        <div style="height:0.3rem;background:#f5f5f5"></div>
        <EChartsPie :classList='userClassList' :tiTle='userTitle' :echartsData='userEchartsData' :color='userColor'></EChartsPie>
        <div style="height:0.6rem;background:#f5f5f5"></div>
        <EChartsPie :classList='MoneyClassList' :tiTle='MoneyTitle' :echartsData='MoneyEchartsData' :color='MoneyColor'></EChartsPie>
        <div style="height:0.6rem;background:#f5f5f5"></div>
        <EChartsLine></EChartsLine>
        <div style="height:0.98rem"></div>
        <NavBottom></NavBottom>
    </div>
</template>

<script>
    import NavBottom from '../components/NavBottom'
    import EChartsPie from '../components/EChartsPie'
    import EChartsLine from '../components/EChartsLine'
    export default{
        components:{
            NavBottom,
            EChartsPie,
            EChartsLine
        },
        created(){ //页面初始化时修改网页标题
			window.document.title = '首页';
            this.$store.state.Index = 1;
        },
        data(){
            return {
                userClassList:[{'name':'普通用户','color':'bnh-pt'},{'name':'V1用户','color':'bnh-v1'},{'name':'V2用户','color':'bnh-v2'},{'name':'V3用户','color':'bnh-v3'}],
                userTitle:'用户统计',
                userEchartsData:[{value:0, name:'50%',itemStyle:{color:'rgb(255,159,127)'}}, {value:0, name:'50%',itemStyle:{color:'rgb(254,219,91)'}}, {value:0, name:'30%',itemStyle:{color:'rgb(109,244,227)'}}, {value:0, name:'20%',itemStyle:{color:'rgb(60,178,239)'}}],
                userColor:['rgb(255,159,127)','rgb(254,219,91)','rgb(109,244,227)','rgb(60,178,239)'],
                MoneyClassList:[{'name':'V1用户','color':'bnh-v1'},{'name':'V2用户','color':'bnh-v2'},{'name':'V3用户','color':'bnh-v3'}],
                MoneyTitle:'收益统计',
                MoneyEchartsData:[{value:0, name:'50%',itemStyle:{color:'rgb(254,219,91)'}}, {value:0, name:'50%',itemStyle:{color:'rgb(109,244,227)'}}, {value:0, name:'50%',itemStyle:{color:'rgb(60,178,239)'}}],
                MoneyColor:['rgb(254,219,91)','rgb(109,244,227)','rgb(60,178,239)'],
            }
        },
        methods:{
            onAuth(){ //进入认证页面
                this.$router.push({ path: '/auth' });
            }
        }
    }
</script>
<style scoped>
.bnh-home-container{background: #f5f5f5}
.bnh-home-headBox{height: 2.11rem;width: 7.5rem;background: #302d3e;position: relative;color: #fff;margin-bottom: 0.3rem}
.bnh-head-img{height: 1.16rem;width: 1.16rem;border-radius: 50%;overflow: hidden;position: absolute;top: 0.45rem;left: 0.5rem;border:solid #fff 2px}
.bnh-head-img > img{width: 100%;height: 100%;}
.bnh-head-name{font-size: 0.4rem;position: absolute;left: 1.88rem;top: 0.4rem;font-weight: 600}
.bnh-home-tel{position: absolute;left: 1.88rem;top: 1.08rem;font-size: 0.28rem}
.bnh-authBox{height: 0.5rem;width: 1.4rem;background: #ffaf3c;border-radius: 15px;position: absolute;top: 0.78rem;right: 0.24rem;text-align: center;line-height: 0.5rem}
.bnh-authBox > p{margin-top: 0.24rem}
</style>
